﻿    <script type="text/javascript">
        $(document).ready(function () {
            //to get the theme
            var theme = getTheme();

            // prepare the data
            var source =
            {
                datatype: "json",
                datafields: @Model.GridSetting,
                url:'@Model.DataRequestUrl',
                root: 'Rows',
                beforeprocessing: function(data){
                    source.totalrecords = data.TotalRows;
                },
                sort: function () {
                    // update the grid and send a request to the server.
                    $("#@Model.GridId").jqxGrid('updatebounddata');
                },
                filter: function () {
                    // update the grid and send a request to the server.
                    $("#@Model.GridId").jqxGrid('updatebounddata');
                }
            };

            var dataAdapter = new $.jqx.dataAdapter(source);

            // initialize jqxGrid
            $("#@Model.GridId").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                theme: theme,
                pageable: true,
                autoheight: true,
                sortable: true,
                altrows: true,
                enabletooltips: true,
                editable: true,
                virtualmode: true,
                filterable: true,
                rendergridrows: function(){
                    return this.source.records;
                },
                columnsresize: true,
                columns: @Model.GridSetting
            });
        });
    </script>
